<template>
	<view class="custom-container">
    <view class="formSelect" @click="changeSelect">
      <view class="selectText">{{ value || value == '0' ? dataList[dataList.findIndex(item => item[fieldNames.id] == value)][fieldNames.value] : '请选择' }}</view>
      <image class="selectIcon" src="@/static/images/icon-down.png"></image>
    </view>
    <view class="popBox" v-if="popShow" @click="changeCencal">
      <view class="content" :class="popIsShow ? 'slideInUp' : 'slideOutDown'" @click.stop="change">
        <view class="popNav">
          <view class="btnCancel" @click="changeCencal">取消</view>
          <view class="title">选择案件编号</view>
          <view class="btnSure" @click="btnSure">确定</view>
        </view>
        <scroll-view class="popContent" :show-scrollbar="false" :scroll-y="true" :scroll-into-view="selectId" scroll-with-animation>
          <view class="scrollItem" :class="temporary == item[fieldNames.id] ? 'active' : ''" v-for="(item,index) in dataList" :id="'id' + item[fieldNames.id]" @click="handeSelect(item[fieldNames.id])">{{ item[fieldNames.value] }}</view>
        </scroll-view>
      </view>
    </view>
	</view>
</template>

<script setup lang="ts">
import { ref,nextTick,onMounted } from "vue";
import { onShow } from "@dcloudio/uni-app";
const emit=defineEmits(['changeSelect'])
const props=defineProps({
  dataList: {
    type: Array,
    default: []
  },
  value: {
    type: String || Number,
    default: ''
  },
  fieldNames: {
    type: Object,
    default: {
      id: 'id',
      value: 'value'
    }
  }
})

onShow(() => {

})

let temporary = ref('');
let popShow = ref(false),popIsShow = ref(false),selectId = ref()
// 打开弹窗
const changeSelect = () => {
  popShow.value = true;
  popIsShow.value = true;
  temporary.value = props.value
  selectId.value = 'id' + props.value
}

// 确定选择
const btnSure = () => {
  let index = props.dataList.findIndex(item => item[props.fieldNames.id] == temporary.value);
  emit('changeSelect',props.dataList[index]);
  changeCencal();
}

// 选择切换
const handeSelect = (id:any) => {
  temporary.value = id;
}

// 取消选择
const changeCencal = () => {
  popIsShow.value = false;
  setTimeout(() => {
    popShow.value = false;
  }, 300);
}

const change = () => {}
</script>

<style lang="scss" scoped>
.formSelect{
  width: 126rpx;
  height: 62rpx;
  border-radius: 10rpx;
  border: 1px solid #E8E9EC;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .selectText{
    margin-left: 12rpx;
    font-size: 28rpx;
    color: #666666;
    width: calc(100% - 58rpx);
    white-space: nowrap;
    overflow: hidden;
    flex-shrink: 0;
  }
  .selectIcon{
    width: 22rpx;
    height: 22rpx;
    margin: 0 12rpx;
    flex-shrink: 0;
  }
}
.popBox{
  position: fixed;
  width: 100vw;
  height: 100vh;
  z-index: 100000;
  background-color: rgba(0,0,0,0.5);
  top: 0;
  left: 0;
  .content{
    position: absolute;
    width: 100%;
    height: calc(848rpx - calc(20rpx + env(safe-area-inset-bottom) / 2));
    padding-bottom: calc(20rpx + env(safe-area-inset-bottom) / 2);
    bottom: 0;
    background: #fff;
    border-radius: 40rpx 40rpx 0rpx 0rpx;
    .popNav{
      position: absolute;
      width: calc(100% - 80rpx);
      height: 110rpx;
      padding: 0 40rpx;
      background: #F7F7F9;
      border-radius: 40rpx 40rpx 0rpx 0rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      z-index: 10;
      .btnCancel{
        font-weight: 400;
        font-size: 32rpx;
        color: #999999;
      }
      .title{
        font-weight: 400;
        font-size: 34rpx;
        color: #333333;
      }
      .btnSure{
        font-weight: 400;
        font-size: 32rpx;
        color: #1E92F0;
      }
    }
    .popContent{
      margin-top: 110rpx;
      width: 100%;
      height: calc(100% - 110rpx);
      :deep(.uni-scroll-view-content){
        display: flex;
        flex-direction: column;
        align-items: center;
      }
      .scrollItem{
        font-size: 28rpx;
        color: #999999;
        width: 100%;
        height: 110rpx;
        text-align: center;
        line-height: 110rpx;
      }
      .active{
        font-size: 34rpx;
        color: #1E92F0;
      }
    }
  }
}
@-webkit-keyframes slideInUp {
  0% {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }

  100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInUp {
  0% {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }

  100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.slideInUp {
  animation: slideInUp 0.3s linear 0s both;
}

@-webkit-keyframes slideOutDown {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  100% {
    visibility: hidden;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}

@keyframes slideOutDown {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  100% {
    visibility: hidden;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}
.slideOutDown {
  animation: slideOutDown 0.3s linear 0s both;
}
</style>
